<template>
  <div class="form-entity-model">
    <div style="height: 41px; line-height: 46px">
      <el-tooltip
        class="item"
        effect="dark"
        content="一个业务对象有且仅有一个主实体，可以添加任意个子实体"
        placement="right"
      >
        <span>
          <el-icon><QuestionFilled /></el-icon>
          <!-- <i class="el-icon-question"></i> -->
          实体列表</span
        >
      </el-tooltip>
      <el-button
        type="primary"
        size="default"
        v-if="!isdataSourceConfig"
        style="margin-left: 16px"
        @click="addEntityRows"
      >添加实体</el-button
      >
      <!-- <el-button type="primary" size="mini" v-if="!isdataSourceConfig" @click="addEntExts">添加外部表</el-button> -->
    </div>
    <el-divider />
    <div :style="{ height: winHeight + 'px' }">
      <el-scrollbar :style="{ maxHeight: winHeight + 'px', height: '100%' }" style="height: 100%">
        <div
          :key="index"
          v-for="(item, index) in formDataEnts.entities"
          :class="index == entIndex ? 'checkBorder' : 'defaultBorder'"
          @click="getEntsByIndex(index)"
        >
          <div>
            <div
              :class="index == entIndex ? 'checkTitle' : 'defaultTitle'"
              style="margin-bottom: 10px"
            >
              <span
                :class="index == entIndex ? 'labelTitle3' : 'labelTitle2'"
                style="margin-left: 13px"
              >{{ item.isMain === 'Y' ? '主实体' : '子实体' }}</span
              >
              <el-icon
                v-if="!formDataEnts.isDeploy || (formDataEnts.isDeploy && !item.formEntityId)"
                style="cursor: pointer; margin-left: 70%"
                @click="deleteEntityRows(index)"
              ><Delete
              /></el-icon>
              <!-- <i
                v-if="!formDataEnts.isDeploy || (formDataEnts.isDeploy && !item.formEntityId)"
                class="el-icon-delete"
                style="cursor: pointer; margin-left: 70%"
                @click="deleteEntityRows(index)"
              ></i> -->
              <!--              <i v-if="index==1" class="el-icon-plus" style="cursor: pointer; margin-left: 54%;"></i>-->
            </div>
            <div style="height: 32px; margin-bottom: 20px">
              <div
                style="height: 32px; line-height: 32px; width: 20%; float: left; margin-left: 10px"
              >
                实体描述
              </div>
              <div style="height: 32px; width: 72%; float: left">
                <el-form-item prop="formEntityDesc">
                  <el-select
                    v-model="item.formEntityDescId"
                    filterable
                    remote
                    reserve-keyword
                    style="width: 100%"
                    :loading="loading"
                    @change="handleSelectBranchCom(item.formEntityDescId, index, 'T1')"
                    v-if="datasourceId != undefined"
                  >
                    <el-option
                      v-for="opt in formEntityList"
                      :key="opt.dictValue"
                      :label="opt.dictLabel"
                      :value="opt.dictValue"
                    />
                  </el-select>
                  <el-input
                    v-else
                    :disabled="!(!item.formEntityId || !formDataEnts.isDeploy)"
                    v-model="item.formEntityDesc"
                    placeholder="请输入内容"
                    :id="'changeEntsDesc' + index"
                    clearable
                    onkeyup="value=value.replace(/[\d]/g,'') "
                    @blur="checkEntityLength(item)"
                    @input="
                      chineseFormat(
                        'entName' + index,
                        formDataEnts.entities,
                        'formEntityName',
                        index,
                        item.formEntityDesc
                      )
                    "
                  />
                </el-form-item>
              </div>
            </div>
            <div style="height: 42px; margin-bottom: 10px">
              <div
                style="height: 32px; line-height: 32px; width: 20%; float: left; margin-left: 10px"
              >
                实体名称
              </div>
              <div style="height: 32px; width: 72%; float: left">
                <el-form-item prop="formEntityName">
                  <el-select
                    v-model="item.formEntityName"
                    filterable
                    remote
                    reserve-keyword
                    style="width: 100%"
                    :loading="loading"
                    @change="handleSelectBranchCom(item.formEntityName, index, 'T2')"
                    v-if="datasourceId != undefined"
                  >
                    <el-option
                      v-for="(opt, ind) in formEntityList"
                      :key="ind"
                      :label="opt.dictValue"
                      :value="opt.dictValue"
                    />
                  </el-select>
                  <el-input
                    v-else
                    :disabled="!!item.formEntityId"
                    v-model="item.formEntityName"
                    @change="checkIsChinese"
                    :id="'entName' + index"
                    :name="'entName' + index"
                  />
                </el-form-item>
              </div>
            </div>
            <div style="height: 32px" v-if="index != 0">
              <div
                style="height: 32px; line-height: 32px; width: 20%; float: left; margin-left: 10px"
              >
                关系
              </div>
              <div style="height: 32px; float: left">
                <el-form-item>
                  <el-radio-group
                    :disabled="!(!item.formEntityId || !formDataEnts.isDeploy)"
                    v-model="item.relationType"
                  >
                    <el-radio v-for="radio in relationData" :label="radio.key" :key="radio.key">{{
                      radio.value
                    }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import * as anvil from '@/utils/anvil'
import { getDataTableList, getDataColumnAttrList } from '@code/api/newCode/scene'
export default {
  name: 'ModelEntity',
  props: {
    formData: {
      type: Object,
      default: () => {}
    },
    entIndex: {
      type: Number,
      default: 0
    },
    isdataSourceConfig: {
      type: Boolean,
      default: false
    },
    datasourceId: {
      type: String,
      default: ''
    }
  },
  data: function () {
    return {
      dialogVisible: false,
      formDataEnts: {},
      relationData: [
        {
          key: '11',
          value: '一对一'
        },
        {
          key: '1n',
          value: '一对多'
        }
      ],
      winHeight: 969,
      activeNames: ['-1'],
      formEntityList: [],
      formEntityOption: [],
      loading: false,
      descIndex: ''
    }
  },
  watch: {
    formData: {
      handler(e) {
        this.formDataEnts = e
      },
      immediate: true,
      deep: true
    },
    formDataEnts: {
      handler(newV) {
        this.$emit('update:formData', newV)
      },
      deep: true
    }
  },
  mounted: function () {
    this.getModelColumn()
    var e = this.winHeight - 280
    this.winHeight != e &&
      (window.innerHeight
        ? (this.winHeight = window.innerHeight)
        : document.body &&
          document.body.clientHeight &&
          (this.winHeight = document.body.clientHeight),
      (this.winHeight = this.winHeight - 280))
  },
  methods: {
    // 选中时触发
    handleSelectBranchCom(value, index, type) {
      this.formDataEnts.entities[index]['isExternal'] = 'Y'
      // this.$set(this.formData.entities[index],'isExternal', 'Y' ) //选择现有模型时候才会传Y
      let fe = this.formEntityList.filter((item) => {
        return item.dictValue == value
      })
      this.formDataEnts.entities[index]['formEntityDesc'] = fe[0].dictLabel
      // this.$set(this.formData.entities[index],'formEntityDesc', fe[0].dictLabel )
      if (type == 'T1') {
        this.formDataEnts.entities[index]['formEntityName'] = value
        // this.$set(this.formData.entities[index],'formEntityName', value )
      } else if (type == 'T2') {
        this.formDataEnts.entities[index]['formEntityDescId'] = value
        // this.$set(this.formData.entities[index],'formEntityDescId', value )
      }
      this.getDataColumnAttr(index)
    },
    // 获取实体
    getModelColumn() {
      if (this.datasourceId != undefined) {
        getDataTableList(this.datasourceId).then((res) => {
          this.formEntityList = res.data
        })
      }
    },
    getDataColumnAttr(index) {
      let totalEntIndex = index + 1
      getDataColumnAttrList(
        this.datasourceId,
        this.formDataEnts.entities[index].formEntityName
      ).then((res) => {
        res.data.entities.columns.forEach((item) => {
          item.index = totalEntIndex
        })
        this.formDataEnts.entities[index]['updStatus'] = 'ADD'
        this.formDataEnts.entities[index]['columns'] = res.data.entities.columns
        // this.$set(this.formData.entities[index],'updStatus', 'ADD')
        // this.$set(this.formData.entities[index],'columns', res.data.entities.columns)
        this.$emit('getFormModelEntities', this.formDataEnts.entities)
      })
    },
    addEntityRows: function () {
      this.$emit('addEntityRows')
    },
    addEntExts: function (e) {
      e ? this.$emit('addEntExts', 'search') : this.$emit('addEntExts')
    },
    getEntsByIndex: function (e) {
      this.$emit('getEntsByIndex', e), this.$forceUpdate()
    },
    deleteEntityRows: function (e) {
      this.$emit('deleteEntityRows', e)
    },
    entBlur: function (e) {
      this.$emit('entBlur', e)
    },
    chineseFormat: function (e, t, n, i, o) {
      console.log(e, t, n, i, o)
      this.$emit('chineseFormat', e, t, n, i, o)
    },
    checkIsChinese: function (e) {
      anvil.checkIsChinese(e)
    },
    checkEntityLength: function (e) {
      this.$emit('checkEntityLength', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.form-entity-model {
  font-size: 12px;
  .checkBorder {
    border: 1px solid #5b9dff;
  }
  .defaultBorder {
    border: 1px solid #ecedf1;
  }
  .checkBorder,
  .defaultBorder {
    width: 343px;
    background: #fff;
    margin-bottom: 10px;
    margin-left: 1px;
  }

  .checkBorder .el-form-item__content,
  .defaultBorder .el-form-item__content {
    margin-left: 0 !important;
  }

  .checkTitle {
    width: 342px;
    height: 30px;
    background: #5b9dff;
    border: 1px solid #5b9dff;
  }

  .defaultTitle {
    width: 342px;
    height: 30px;
    background: #f4f4f5;
    border: 1px solid #ecedf1;
  }

  .labelTitle2,
  .labelTitle3 {
    width: 43px;
    height: 15px;
    font-size: 14px;
    font-weight: 400;
  }

  .labelTitle3 {
    color: #fff;
    line-height: 24px;
  }

  .labelTitle2 {
    color: #919191;
    line-height: 24px;
  }
}
</style>
